<template>
  <div>
    <!-- 上架商品弹窗 -->
    <el-dialog title="上架商品" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格/吨" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存/吨" :label-width="formLabelWidth">
          <el-input v-model="form.inventory" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="display: none;" label="图片" :label-width="formLabelWidth">
          <el-input v-model="form.imageUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地区" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGoods">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 列表头部按钮 -->
    <el-button type="primary" @click="add">上架商品</el-button>
    <el-input v-model="goods" placeholder="请输入商品名称" style="width: 160px;margin: 0 6px 0 100px;"></el-input>
    <el-button type="primary" @click="select">搜索商品</el-button>
    <!-- 商品列表 -->
    <el-table :data="tableData" style="width: 100%;font-size: 20px;margin-top: 30px;" height="700" :row-class-name="tableRowClassName" border>
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="price" label="价格/吨" width="180" />
      <el-table-column prop="inventory" label="库存/吨" width="180" />
      <el-table-column prop="address" label="发货地区" width="180" />
      <el-table-column prop="salesVolume" label="销量/吨" width="180" />
      <el-table-column prop="releaseDate" label="上架日期" width="400" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="medium" type="primary" @click="modify(scope.$index, scope.row)">修改库存</el-button>
          <el-button size="medium" type="primary" @click="modifyPrice(scope.$index, scope.row)">修改价格</el-button>
          <el-button size="medium" type="danger" @click="offshelf(scope.$index, scope.row)">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="pages * 10"
      :current-page="current">
    </el-pagination>
  </div>
</template>

<script>
import { getGoodsPage, addGoods, modifyinventory, deleteGoods, selectGoodsName } from '../api/api.js'
export default {
  data() {
    return {
      tableData: [],
      goods: '',
      pages: 0,
      current: 1,
      dialogFormVisible: false,
      form: {
        name: '',
        price: '',
        inventory: '',
        address: '',
        imageUrl: ''
      },
      formLabelWidth: '120px'
    }
  },
  mounted() {
    this.getPage()
  },
  methods: {
    //分页查询
    getPage() {
      getGoodsPage(this.current).then((res) => {
        console.log(res);
        this.tableData = res.data.records
        this.pages = res.data.pages
      })
    },
    // 添加按钮
    add() {
      this.dialogFormVisible = true
      this.form.name = ''
      this.form.price = ''
      this.form.inventory = ''
      this.form.address = ''
      this.form.imageUrl = 'https://ts1.cn.mm.bing.net/th/id/R-C.ee4ee6842290f09be8d40a16448e05f0?rik=q6%2bvkepjTcEvpg&riu=http%3a%2f%2fwww.cnfina.com%2fuploadfile%2f2021%2f0111%2f20210111105138860.png&ehk=HalmZ1w7R%2bbxH%2bVVE%2fjTzVUyfGyo%2foEJQZW0I8D%2ff6g%3d&risl=&pid=ImgRaw&r=0'

    },
    // 添加商品
    addGoods() {
      this.dialogFormVisible = false
      this.$message({
        message: '添加成功!',
        type: 'success'
      });
      addGoods(this.form).then((res) => {
        console.log(res);
        this.getPage()
      })
    },
    // 下架
    offshelf(index, row) {
      console.log(index, row);
      if (localStorage.getItem("name") == "超级管理员") {
        this.$confirm('是否确认下架?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteGoods(row.id).then((res) => {
            console.log(res);
            this.getPage()
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        this.$message({
          message: '您没有权限!',
          type: 'warning'
        });
      }
    },
    // 修改库存
    modify(index, row) {
      console.log(index, row);
      this.$prompt('请输入库存数', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        if (value == null) {
          this.$message({
            type: 'error',
            message: '库存不能为空!'
          });
        } else {
          // 修改库存
          row.inventory = value
          modifyinventory(row).then((res) => {
            console.log(res);
            this.getPage()
          })
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    // 修改价格
    modifyPrice(index, row) {
      console.log(index, row);
      this.$prompt('请输入价格', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        if (value == null) {
          this.$message({
            type: 'error',
            message: '价格不能为空!'
          });
        } else {
          // 修改库存
          row.price = value
          modifyinventory(row).then((res) => {
            console.log(res);
            this.getPage()
          })
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    // 条件查询
    select() {
      if (this.goods == '') {
        this.$message({
          message: '内容不能为空',
          type: 'warning'
        });
      } else {
        this.$message({
          message: '查询成功!',
          type: 'success'
        });
        selectGoodsName(this.goods).then((res) => {
          console.log(res);
          this.tableData = res.data
        })
      }
    },
    // 颜色
    tableRowClassName({ row, rowIndex }) {
      if (row.inventory === 0) {
        return 'danger-row';
      }
    },
    handleCurrentChange(val) {
      this.current = val
      this.getPage()
    }
  },
}
</script>

<style>
.el-table .danger-row {
  background: rgb(237, 89, 89);
  font-weight: 700;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-pagination {
  margin-top: 50px;
  position: absolute;
  left: 53%;
  transform: translate(-50%, 0);
}

.el-table {
  height: 686px;
}
</style>